<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title">video,视频播放器</view>
		</view>
		<view class="smart-padding-wrap">
			<video id="myVideo"
			:danmu-list="danmuList"
			enable-danmu="true"
			src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4">
			</video>
		</view>
		<view>
			<input v-model="danmuValue" class="smart-input" type="text" placeholder="在此输入弹幕内容"></view>
		<view class="btn-v"> <button @click="sendDanmu" class="page-body-button">发送弹幕</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				danmuList: [
					{
						text: '1s出现弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '3s出现弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: ''
			};
		},
		onready: function(res) {
			this.videoContext = uni.createVideoContext('myVideo');
			setTimeout( () => {
				
			},350);
		},
		methods: {
			senDanmu: function(e) {
				this.videoContext.sendDanmu( {
					text: this.danmuValue,
					color: 'red'
				});
				this.danmuValue = '';
			}
		}
	};
</script>

<style>
	video {
		width: 100%;
	}
	.btn-v {
		margin: 15rpx;
	}
</style>